import React, {Component} from 'react';
import {Breadcrumb, message, Form, Button, Select, Table, Space} from "antd";
import {NavLink} from "react-router-dom";
import {connect} from "react-redux";

const {Option} = Select;

@connect(state => ({userInfo: state.userInfo}))
class Fankui extends Component {
    state = {
        loading: false,
        pagelistquery: {
            total: 0,
            page: 1,
            pagesize: 10,
            kefu_type: "fankui",
            state: "",
            id: ''
        },
        tableData: [] //列表信息
    }
    changState = async (row,state) => {
        let data = {
            kefu_id: row.fankui_id,
            kefu_state: state,
            type: 'fankui'
        }
        let result = await this.$axios.post("/admin/changkefustate", data);
        if (result.data.state.type === "SUCCESS") {
            message.success("状态更改成功");
            this.getFankuiList();
        }
    }
    deleteFankui = async (id) => {
        let result = await this.$axios.post("/admin/deletekefu", {id: id, type: 'fankui'});
        if (result.data.state.type === "SUCCESS") {
            message.success("删除成功");
            this.getFankuiList();
        }
    }
    getFankuiList = async (values) => {
        this.setState({loading:true});
        values = {...this.state.pagelistquery,...values};
        this.setState({type:values.type,pagelistquery:values});
        let result = await this.$axios.post("/admin/kefullist", values);
        if (result.data.state.type === "SUCCESS") {
            let pagelistquery = this.state.pagelistquery;
            pagelistquery.total = result.data.count;
            this.setState({tableData:result.data.data,pagelistquery: pagelistquery});
            this.setState({loading:false});
        }
    }
    handleSizeChange = (current, size) => {
        let pagelistquery = this.state.pagelistquery
        pagelistquery.pagesize = size;
        this.setState({pagelistquery: pagelistquery});
        this.getFankuiList();
    }
    handleCurrentChange = (page, pagesize) => {
        let pagelistquery = this.state.pagelistquery;
        pagelistquery.page = page;
        pagelistquery.pagesize = pagesize;
        this.setState({pagelistquery: pagelistquery});
        this.getFankuiList();
    }
    componentDidMount() {
        this.getFankuiList();
    }

    render() {
        const {pagelistquery,loading,tableData} = this.state;
        tableData.map((item,index)=>{
            return item.key = index;
        });
        const columns = [
            {
                title: "创建日期",
                dataIndex: "createtime",
                render:text => <span>{this.dateFormat(text)}</span>
            },
            {
                title: "邮箱",
                dataIndex: "fankui_user"
            },
            {
                title: "反馈内容分",
                dataIndex: "fankui_content"
            },
            {
                title: "状态",
                dataIndex: "fankui_state",
                render: text => {
                    if(text === 1) return <span style={{color: "rgb(108, 187, 122)"}}>已查看</span>
                    else if (text === 0) return <span style={{color: "#409EFF"}}>未处理</span>
                    else return <span style={{color: "rgb(246, 12, 108)"}}>标记</span>
                }
            },
            {
                title: "审核人",
                dataIndex: "admin",
            },
            {
                title: "操作",
                dataIndex: "fankui_id",
                render: (text,record) => (
                    <Space size="small">
                        <Button type="text" style={{color:"#409EFF"}} size={"small"} onClick={()=>{this.changState(record,2)}}>标记</Button>
                        <Button type="text" style={{color:"#409EFF"}} size={"small"} onClick={()=>{this.changState(record,1)}}>已处理</Button>
                        <Button type="text" style={{color:"#409EFF"}} size={"small"} onClick={()=>{this.deleteFankui(text)}}
                                disabled={this.props.userInfo.uinfo.jurisdiction.isfk !== '1' && this.props.userInfo.uinfo.username !== 'admin'}
                        >删除</Button>
                    </Space>
                )
            }
        ]
        return (
            <div>
                <div className="top">
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <NavLink to='/'>首页</NavLink>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            客服中心
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            意见反馈
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <div className="main">
                    <div>
                        <Form onFinish={this.getFankuiList} layout={"inline"}>
                            <Form.Item name="state" initialValue="" style={{width: '15%', margin:"15px 10px 22px 0"}}>
                                <Select placeholder="状态">
                                    <Option value="">全部</Option>
                                    <Option value="1">已处理</Option>
                                    <Option value="0">未处理</Option>
                                    <Option value="2">标记</Option>
                                </Select>
                            </Form.Item>
                            <Form.Item style={{margin:"15px 10px 22px 0"}}>
                                <Button type="primary" htmlType="submit">查询</Button>
                            </Form.Item>
                        </Form>
                    </div>
                    <Table dataSource={tableData} columns={columns} bordered
                           loading={loading}
                           pagination={{
                               total:pagelistquery.total,
                               showSizeChanger: true,
                               showQuickJumper: true,
                               onChange: this.handleCurrentChange,
                               onShowSizeChange: this.handleSizeChange,
                               showTotal: total => `共 ${total} 条`,
                               position:["bottomLeft"]
                           }}
                    ></Table>
                </div>
            </div>
        );
    }
}

export default Fankui;